<template>
  <el-form :rules="rules" ref="formRef" :model="formData" style="width: 645px;margin-top: 20px" :label-width="130" >
    <el-input type="text" v-model="formData.id" v-show="false"></el-input>
    <el-row>
      <el-col span="11">
        <el-form-item  label="网卡">
         <el-select v-model="formData.networkName" style="width: 190px;">
           <el-option label="" value=""></el-option>
           <el-option v-for="(item,index) in networkData "  :label="item.name" :value="item.name"></el-option>
         </el-select>
        </el-form-item>
      </el-col>
      <el-col span="11">
        <el-form-item  label="ip">
          <el-input v-model="formData.networkIp" ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-for="(item,index) in formData.dockerDeployNetworkList" style="width: 800px;">
      <el-col span="11">
        <el-form-item  label="宿主机端口">
          <el-input type="number" v-model="item.hostPort"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="11">
        <el-form-item  label="容器端口">
          <el-input type="number" v-model="item.containerPort"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="2" style="margin: 6px 0px 0px 5px;">
        <el-icon>
          <Plus @click="addFormItem" v-if="index == 0"></Plus>
          <Minus v-if="index > 0" @click="removeCurrentForItem(index)"></Minus>
        </el-icon>
      </el-col>
    </el-row>
    <div class="footer" style="text-align: right">
      <el-button type="primary"   @click="submitForm">提交</el-button>
    </div>
  </el-form>
</template>

<script setup>

import {inject, reactive, ref, toRaw} from "vue";
import {AddLocation, DocumentAdd, FolderAdd, Minus, Plus} from "@element-plus/icons-vue";
import {isEmpty} from "lodash";
import {ElMessage} from "element-plus";
import {AXIOS_NAME} from "@/constant/constant.js"

const $axios = inject(AXIOS_NAME);
const networkData = reactive([]);
const formData = reactive({
  networkIp: "",
  id: '',
  networkName: '',
  dockerDeployNetworkList: [{containerPort:"",hostPort:""}]
});
const formRef=  ref(null);

let rules = {};

const addFormItem = () =>{
  formData.dockerDeployNetworkList.push({containerPort:"",hostPort:""});
}

const removeCurrentForItem = (index) =>{
  formData.dockerDeployNetworkList.splice(index,1);
}

const setData = (data) =>{
  formData.id = data.id;
  formData.networkIp = data.networkIp
  formData.networkName = data.networkName;
  formData.dockerDeployNetworkList = data.dockerDeployNetworkList;
  if(formData.dockerDeployNetworkList == undefined || formData.dockerDeployNetworkList == null
      || formData.dockerDeployNetworkList.length <= 0){
    formData.networkIp = "";
    formData.dockerDeployNetworkList = [{containerPort:"",hostPort:""}];
  }
}

const submitForm = () =>{
  if(isEmpty(formData.id)){
    ElMessage.error("请选择容器!");
    return;
  }
  if(isEmpty(formData.networkIp) && !isEmpty(formData.networkName)){
    ElMessage.error("请填写ip!");
    return;
  }
  if(!isEmpty(formData.networkIp) && isEmpty(formData.networkName)){
    ElMessage.error("请填写网卡!");
    return;
  }
  for(const item of formData.dockerDeployNetworkList){
    if(isEmpty(item.containerPort+"") || isEmpty(item.hostPort+"")){
      ElMessage.error("请填写数据!");
      return;;
    }
  }
  $axios.post("/deploy/updateNetwork",toRaw(formData)).then(response =>{
    const data = response.data;
    if(data.code == 1){
      ElMessage.info(data.msg);
      return;
    }
    ElMessage.error(data.msg);
  });
}

const getNetworkInfo = () => {
  $axios.post("/networkCard/getNetworkCardList",{}).then(response => {
    const data = response.data;
    if(data.code == 1){
      networkData.pushAll(data.data);
    }
  });
}

getNetworkInfo();

defineExpose({setData});
</script>

<style scoped>

</style>